<template>
  <div class="desctitle">
    <div class="header flex-between">
      <div class="title flex-start">
        <span class="flag"></span>
        <span class="desc">{{descTitle}}</span>
      </div>
      <span class="addbtn flex-center" v-if="desBtnName" @click="desEvent">{{desBtnName}}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    descTitle: {
      require: String,
      default: ''
    },
    desBtnName: {
      require: String,
      default: ''
    }
  },
  methods: {
    desEvent () {
      this.$emit('desEvent')
    }
  }

}
</script>

<style lang="scss" scoped>
     .header {
       background-color: #fff;
       height: 75px;
       font-size: 14px;
       font-weight: bold;
       color:rgba(51,51,51,1);
       padding: 0 30px;
       .title{
        .flag {
          display: inline-block;
          height: 18px;
          width: 4px;
          background-color: #4868ff;
        }
        .desc {
          margin-left: 10px;
          height: 18px;
          line-height: 18px;
          font-size: 18px;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
        }
       }
      .addbtn{
        cursor: pointer;
        width:84px;
        height:36px;
        background:rgba(72,104,255,1);
        border-radius:18px;
        font-size:14px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(255,255,255,1);
      }

    }
</style>
